<script lang="ts" setup>
import CancelCheckModal from './CancelVerifyModal.vue'
import { ClassChangeApi } from '@/apis'
import { formatMoney } from '@/utils/common'

const visible = ref(false)
const detail = ref()
const loading = ref(false)

const getDetail = async (id: string) => {
  loading.value = true
  const res = await ClassChangeApi.getCancelDetail(id)
  loading.value = false
  detail.value = res
}

const open = (id: string) => {
  getDetail(id)
  visible.value = true
}

const cancelCheckRef = ref<InstanceType<typeof CancelCheckModal>>()
const gotoCheck = (row) => {
  cancelCheckRef.value?.open(row)
}

defineExpose({
  open,
})
</script>

<template>
  <a-drawer width="35%" title="详情" :visible="visible" :footer="false" @cancel="visible = false">
    <a-card v-if="detail" title="基础信息" :bordered="false" class="section">
      <template #extra>
        <!-- <a-space>
          <a-button v-if="detail.operateStatus === 'VERIFYING'" type="primary" size="mini" @click="gotoCheck(detail)">
            <a-space size="mini">
              <icon-check />
              <span>审核</span>
            </a-space>
          </a-button>
        </a-space> -->
        <!--
        <a-space size="mini">
          <a-button v-if="detail.operateStatus === 'VERIFYING'" type="outline" status="danger" size="small" @click="onRejectCancelRecord">
            拒绝
          </a-button>
          <a-button v-if="detail.operateStatus === 'VERIFYING'" type="primary" size="small" @click="onPassCancelRecord">
            通过
          </a-button>
        </a-space> -->
      </template>
      <a-grid :cols="2" :col-gap="12" :row-gap="16">
        <a-grid-item>
          <div class="color-[#999]">
            学生
          </div>
          <div class="mt-1 color-[#111]">
            {{ detail?.student?.name }}
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            操作
          </div>
          <div class="mt-1 color-[#111]">
            <DictLabel v-model="detail.changeType" code="ChangeTypeEnum" />
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            申请方式
          </div>
          <div class="mt-1 color-[#111]">
            <DictLabel v-model="detail.operateSource" code="OperateSourceEnum" />
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            申请状态
          </div>
          <div class="mt-1 color-[#111]">
            <DictLabel v-model="detail.operateStatus" code="OperateStatusEnum" />
          </div>
        </a-grid-item>
        <a-grid-item>
          <div class="color-[#999]">
            创建人
          </div>
          <div class="mt-1 color-[#111]">
            {{ detail.createUserName || '-' }}
          </div>
        </a-grid-item>
      </a-grid>
    </a-card>
    <a-card v-if="detail" title="退课信息" :bordered="false" class="section">
      <div>
        <div class="color-[#999]">
          退课班级：
        </div>
        <div class="mt-1 color-[#111]">
          <CellClassInfo :id="detail.originalClassId" :is-link="false" :name="detail.originalClassName" :lead-teacher-name="detail.originalLeadTeacherName" :assist-teacher-name="detail.originalAssistTeacherName" />
        </div>
      </div>
      <div class="mt-2 color-[#999]">
        转出课次：
      </div>
      <div v-for="(item, index) in detail.originalLesson" :key="index" class="mt-2 color-[#111]">
        {{ item.title }}-({{ item.startTime }}-{{ item.endTime }})
      </div>
    </a-card>

    <a-card v-if="detail" title="退费信息" :bordered="false" class="section">
      <div>
        <div class="color-[#999]">
          退课金额：
        </div>
        <div class="mt-1 color-[#111]">
          {{ formatMoney(detail.refund.refundPrice) }}
        </div>
      </div>
    </a-card>
  </a-drawer>
  <CancelCheckModal ref="cancelCheckRef" @change="getDetail" />
</template>

<style lang='less' scoped>
</style>
